<template>
	<div class="findHeadimg">
		<!--按钮-->
		<ul>
			<li @click="dynamic(index)" v-for="item,index in items">{{item}}</li>
		</ul>
		<!--按钮下的组件-->
		<transition name="fade" mode="out-in">
	  		<component :is="curCom"></component>
    	</transition>
	</div>
</template>

<script>
	import $ from "jquery";
	//歌手
	import headimgSinger from "./headimgSinger";
	//推荐
	import headimgRecommend from "./headimgRecommend";
	//歌单
	import headimgSongSheet from "./headimgSongSheet";
	//电台
	import headimgList from "./headimgList";
	export default {
		name:"findHeadimg",
		data(){
			return{
				items:["歌手","推荐","歌单","榜单"],
				curCom:"headimgSinger",
			}
		},
		methods:{
			dynamic(index){
				switch(index){
					case 0:this.curCom = "headimgSinger";break;
					case 1:this.curCom = "headimgRecommend";break;
					case 2:this.curCom = "headimgSongSheet";break;
					case 3:this.curCom = "headimgList";break;
				}
			}
		},
		components:{
			headimgSinger,
			headimgSongSheet,
			headimgRecommend,
			headimgList,
		}
	}
</script>

<style scoped lang="scss">
.findHeadimg{
    width: 100%;
    height: 100%;
    ul{
    	border-bottom: 1px solid #ddd;
    	margin-bottom: 1%;
    	li{
    		display: inline-block;
    		width: 25%;
    		text-align: center;
    		font-size: 18px;
    		padding: 5% 0;
    		color: #bbb;
    	}
    	li:hover{
    		color: #fff;
    	}
    	.color{
			color:#fff;
		}
    }
    .headimgSinger,.headimgRecommend,.headimgSongSheet,.headimgList{
    	height: 80%;
    	overflow-y: auto;
    	overflow-x: hidden;
    }
	.fade-enter-active,.fade-leave-active{
		transition:all .3s;
	}

	.fade-enter,.fade-leave-to{
		opacity: 0;
		transform: translateX(200%);
	}
	
}
</style>